<script setup lang='ts'>
import {ref, onMounted, onUnmounted} from 'vue'
import {useRoute} from 'vue-router'
import {router} from '@/router'
import {useScroll} from './hooks/useScroll'
import VuePdfApp from "vue3-pdf-app"
import "vue3-pdf-app/dist/icons/main.css"
import {encode} from 'gpt-tokenizer'
import {createApp} from 'vue';
import VMdPreview from '@kangc/v-md-editor/lib/preview';
import '@kangc/v-md-editor/lib/style/preview.css';
import githubTheme from '@kangc/v-md-editor/lib/theme/github.js';
import '@kangc/v-md-editor/lib/theme/style/github.css';

// highlightjs
import hljs from 'highlight.js';

VMdPreview.use(githubTheme, {
  Hljs: hljs,
});

const app = createApp(/*...*/);

app.use(VMdPreview);


const {scrollRef, scrollToBottom} = useScroll()

// Conversation and PDF preview panel toggle control
let showTab = ref<string>("nav-tab-chat")
let tabWidth = ref<string>("")

// vue3-pdf-app UI configuration
let pdfFile = ref<string>("")

let markdown = ref<string>("# 你好")

let autoRead = ref<boolean>(false)

const config = ref<{}>({
  sidebar: true,
  toolbar: {
    toolbarViewerLeft: {
      findbar: true,
      previous: true,
      next: true,
      pageNumber: false,
    },
    toolbarViewerRight: {
      presentationMode: true,
      openFile: false,
      print: false,
      download: false,
      viewBookmark: false,
    },
    toolbarViewerMiddle: {
      zoomOut: true,
      zoomIn: true,
      scaleSelectContainer: true,
    }
  },
})

// Message input box
const prompt = ref<string>('')

// Loading state and button state
const buttonDisabled = ref<boolean>(false)

// Get uuid from URL params
const route = useRoute()
let {uuid} = route.params as { uuid: string }

interface Conversation {
  title: string;
  uuid: string;
  isEdit: boolean;
  createDate: string;
  lastChatContent: string;
  active: boolean;
}

interface Message {
  send: {
    messages: {
      content: string;
      fileName: any;
      fileSize: number;
    }[];
  };
  reading: boolean
  loading: boolean;
  receive?: {
    message?: {
      content: string;
    }[];
  };
}

let history = [[]]

// Conversation list and message list
var conversationList = ref<Conversation[]>([])
var messageList = ref<Message[]>([]);
var ttt = "不好意思，出现了一些问题"

let conversations = window.localStorage.getItem("chatStore")

if (conversations) {
  conversationList.value = JSON.parse(conversations)
}

// Check if new conversation
if (!uuid || uuid === '0') {
  uuid = Date.now().toString()

  // Initialize empty conversation
  if (!conversations || conversations == "[]") {
    conversationList.value.push({
      title: 'New Chat',
      uuid: uuid,
      isEdit: false,
      createDate: new Date().toLocaleString(),
      lastChatContent: 'Hello I am Assistant...',
      active: true
    })
  } else {
    // If has history, get last conversation
    let lastConversation = conversationList.value[conversationList.value.length - 1]
    uuid = lastConversation.uuid

    let messages = window.localStorage.getItem(uuid)
    if (messages) {
      messageList.value = JSON.parse(messages)
    }

    router.push({name: 'Chat', params: {uuid}})
  }
} else {
  // Load current conversation messages
  let messages = window.localStorage.getItem(uuid)
  if (messages) {
    messageList.value = JSON.parse(messages)
  }

  conversationList.value.forEach((item, index) => {
    if (item.uuid == uuid) {
      item.active = true
    } else {
      item.active = false
    }
  })
  scrollToBottom()
}

const recording = ref(false)
const mediaRecorder = ref(null)
const chunks = ref([])
const audioURL = ref('')
let stream


onMounted(async () => {
  try {
    stream = await navigator.mediaDevices.getUserMedia({audio: true})
    console.log('授权成功！')
    mediaRecorder.value = new MediaRecorder(stream)
    mediaRecorder.value.ondataavailable = (e) => {
      chunks.value.push(e.data)
    }

    mediaRecorder.value.onstop = async () => {
      const blob = new Blob(chunks.value, {type: 'audio/wav; codecs=opus'})
      const file = new File([blob], 'audio.wav', {type: blob.type})
      const formData = new FormData();
      formData.append('audio', blob, 'recording.wav');
      formData.append("session_id", uuid)


      let response = await fetch('http://127.0.0.1:5000/asr', {
        method: 'POST',
        body: formData
      })

      let text = await response.text()
      console.log(text)
      prompt.value = text
      onConversation()

      chunks.value = []
      audioURL.value = URL.createObjectURL(file)
    }
  } catch (error) {
    console.error('获取音频输入设备失败：', error)
  }
})


const startRecording = () => {
  mediaRecorder.value.start()
  recording.value = true
}

const stopRecording = () => {
  mediaRecorder.value.stop()
  recording.value = false
}


const closeStream = (stream) => {
  if (stream) {
    console.log(stream.getTracks())
    stream.getTracks().forEach((track) => track.stop())
  }
}

onUnmounted(() => {
  closeStream(stream)
})


function getCurrentConversation() {
  for (let i = 0; i < conversationList.value.length; i++) {
    if (conversationList.value[i].uuid == uuid) {
      return conversationList.value[i]
    }
  }
}

// Set active conversation
function handleAdd() {

  for (let i = 0; i < conversationList.value.length; i++) {
    if (!conversationList.value[i].isEdit) {
      return
    }
  }
  // Reset the message record of the new conversation
  messageList.value = []

  // Reset the active status of the conversation list
  conversationList.value.forEach((item, index) => {
    item.active = false
  })

  // Initialize an empty conversation
  uuid = Date.now().toString()

  conversationList.value.unshift({
    title: "New Chat",
    uuid: uuid,
    isEdit: false,
    createDate: new Date().toLocaleString(),
    lastChatContent: 'Hello I am Assistant...',
    active: true
  })

  // Save the conversation to local storage
  window.localStorage.setItem("chatStore", JSON.stringify(conversationList.value))
}

// Switch conversation
function handleSwitch(selectedUuid: string) {
  uuid = selectedUuid

  // Reset message record of the new conversation
  let messages = window.localStorage.getItem(selectedUuid)
  if (messages) {
    messageList.value = JSON.parse(messages)
  } else {
    messageList.value = []
  }

  // Reset active status of the conversation list
  conversationList.value.forEach((item, index) => {
    if (item.uuid == selectedUuid) {
      item.active = true
    } else {
      item.active = false
    }
  })

  router.push({name: 'Chat', params: {uuid}})
}

// File upload related
var fileName = ref()
var fileSize = ref<number>(0)
var formattedFileSize = ref<string>('0B')
var fileUploadCard = ref<boolean>(false)
const isPdf = ref(true)
var fileContent = ref()


// Handle file upload
function handleUpload(e: Event) {
  const target = e.target as HTMLInputElement;
  if (target.files && target.files[0].size >= 5 * 1024 * 1024) {
    alert('Maximum file size limit is 5MB')
    return
  } else if (!target.files || target.files.length === 0) {
    alert('Please select a file')
    return
  }

  // Set file upload style
  fileName.value = target.files[0].name
  let fileExtension = fileName.value.split('.').pop();

  if (fileExtension == "pdf") {
    isPdf.value = true
    pdfFile.value = URL.createObjectURL(target.files[0])
  } else {
    isPdf.value = false
    const fileReader = new FileReader();
    fileReader.onload = (e: any) => {
      markdown.value = e.target.result
      console.log(e.target.result) // 文件文本字符串
    }
    fileReader.readAsText(target.files[0]);
  }
  fileSize.value = target.files[0].size
  formatFileSize()

  // Preview PDF
  showTab.value = 'nav-tab-doc'
  tabWidth.value = 'width: 60%'


  // Upload file and extract content
  const formData = new FormData()
  formData.append('doc', target.files[0], fileName.value)
  formData.append("session_id", uuid)

  fetch("http://127.0.0.1:5000/upload_file", {
    method: 'POST',
    body: formData,
  }).then(res => {
    console.log(res)
    prompt.value = "上传了文件" + fileName.value
    onConversation()
  })


}

function handleBackChat() {
  showTab.value = 'nav-tab-chat'
  tabWidth.value = ''
}

function handleBackDoc() {
  showTab.value = 'nav-tab-doc'
  tabWidth.value = 'width: 40%'
}

// Format file size in Bytes, KB, MB, GB
function formatFileSize() {
  if (fileSize.value < 1024) {
    formattedFileSize.value = fileSize.value + 'B';
  } else if (fileSize.value < (1024 * 1024)) {
    var temp = fileSize.value / 1024
    formattedFileSize.value = temp.toFixed(2) + 'KB'
  } else if (fileSize.value < (1024 * 1024 * 1024)) {
    var temp = fileSize.value / (1024 * 1024)
    formattedFileSize.value = temp.toFixed(2) + 'MB'
  } else {
    var temp = fileSize.value / (1024 * 1024 * 1024);
    formattedFileSize.value = temp.toFixed(2) + 'GB'
  }
}

// Submit message
async function handleSubmit() {
  onConversation()
}

// Stream request
async function onConversation() {
  let message = prompt.value
  if (!message || message.trim() === '')
    return

  // Clear input box and disable button
  prompt.value = ''
  buttonDisabled.value = true
  fileUploadCard.value = false

  // Send message (for local display, not directly sent to backend)
  messageList.value.push({
    send: {
      messages: [
        {
          content: message,
          fileName: fileName.value,
          fileSize: fileSize.value,
        },
      ],
    },
    loading: true,
    reading: false
  });

  scrollToBottom()

  // Stream request
  try {
    if (fileContent.value) {
      message += ', Uploaded file content: ' + fileContent.value
    }

    let history: string[][] = []

    for (let i = 0; i < messageList.value.length; i++) {
      if (messageList.value[i].receive) {
        history.push([messageList.value[i].send.messages[0].content, messageList.value[i].receive.message[0].content])
      }
    }

    history.push([message, ""])

    let data = {
      "session_id": uuid,
      "history": history
    }

    let headers = {
      'Content-Type': 'application/json'
    }

    // Send request
    let response = await fetch('http://127.0.0.1:5000/chat', {
      method: 'POST',
      headers: headers,
      body: JSON.stringify(data)
    })

    // Reset file upload related states immediately after sending to backend
    fileName.value = ''
    fileSize.value = 0
    formattedFileSize.value = '0B'

    if (!response.ok) {
      throw new Error('Network response was not ok')
    }

    // Read the data returned from the stream
    const reader = response.body.getReader();

    const textDecoder = new TextDecoder()
    let result = true
    while (true) {
      // Get a chunk
      const {done, value} = await reader.read()


      if (done) {
        console.log('Stream ended')
        result = false

        // Restore button state
        buttonDisabled.value = false
        fileContent.value = ''

        // Save current messages
        window.localStorage.setItem(uuid, JSON.stringify(messageList.value))
        window.localStorage.setItem("chatStore", JSON.stringify(conversationList.value))
        break
      }


      // Convert chunk string to array
      let chunkText = textDecoder.decode(value)
      console.log(chunkText)
      if (!messageList.value[messageList.value.length - 1].receive) {
        // If it is the first result, set the state directly
        var chunkData = {
          message: [{
            content: chunkText
          }]
        }
        messageList.value[messageList.value.length - 1].receive = chunkData
        messageList.value[messageList.value.length - 1].loading = false
      } else {
        const lastMessage = messageList.value[messageList.value.length - 1]?.receive;
        if (lastMessage && lastMessage.message[0].content) {
          lastMessage.message[0].content += chunkText;
        }
      }
      scrollToBottom()
    }


    let save_data = {
      "session_id": uuid,
      "history": history
    }
    history.pop()
    history.push([message, messageList.value[messageList.value.length - 1].receive.message[0].content])
    fetch('http://127.0.0.1:5000/save_chat', {
      method: 'POST',
      headers: headers,
      body: JSON.stringify(save_data)
    })
    if (autoRead.value) {
      await read_aloud(messageList.value[messageList.value.length - 1])
    }
    let conversation = getCurrentConversation()
    if (conversation.title == "New Chat") {
      console.log(uuid)
      conversation.title = message
    }
    conversation.lastChatContent = messageList.value[messageList.value.length - 1].receive.message[0].content
    conversation.isEdit = true

    window.localStorage.setItem("chatStore", JSON.stringify(conversationList.value))

  } catch (e) {
    console.log(e)
  }
}

function handleDele(selectedUuid: string) {
  // Reset the active state of the conversation list
  conversationList.value.forEach((item, index) => {
    if (item.uuid == selectedUuid) {
      conversationList.value.splice(index, 1)

      // Save the conversation to local storage
      window.localStorage.setItem("chatStore", JSON.stringify(conversationList.value))
      return false
    }
  })

  // Reset the message records of the new conversation
  if (uuid == selectedUuid) {
    let messages = window.localStorage.getItem(selectedUuid)
    if (messages) {
      window.localStorage.removeItem(selectedUuid)
      messageList.value = []
    }
  }

  fetch('http://127.0.0.1:5000/delete_chat', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({"session_id": selectedUuid})
  })

}

async function read_aloud(item: Message) {
  item.reading = true
  let data = {
    'cha_name': '胡桃(测试)', 'character_emotion': 'default',
    'text': item.receive.message[0].content,
    'text_language': '多语种混合', 'batch_size': 10, 'speed': 1, 'top_k': 6, 'top_p': 0.8,
    'temperature': 0.8,
    'stream': 'False', 'save_temp': 'True'
  }

  let headers = {
    'Content-Type': 'application/json'
  }

  // Send request
  let response = await fetch('http://127.0.0.1:5000/tts', {
    method: 'POST',
    headers: headers,
    body: JSON.stringify(data)
  })

  if (!response.ok) {
    throw new Error('Network response was not ok')
  }

  const audioBlob = await response.blob();
  const audioUrl = URL.createObjectURL(audioBlob);

  const audio = document.createElement("audio"); //创建标签

  audio.autoplay = 'autoplay'
  audio.style.display = "none";
  audio.src = audioUrl; // 指定链接
  audio.play()

  item.reading = false
}


</script>

<template>
  <div id="layout" class="theme-cyan">
    <!-- Sidebar -->
    <div class="navigation navbar justify-content-center py-xl-4 py-md-3 py-0 px-3">
      <a href="#" title="TalkWithLLM-UI" class="brand">
        <svg class="logo" viewBox="0 0 128 128" width="24" height="24" data-v-c0161dce="">
          <path fill="#42b883" d="M78.8,10L64,35.4L49.2,10H0l64,110l64-110C128,10,78.8,10,78.8,10z"
                data-v-c0161dce=""></path>
          <path fill="#35495e" d="M78.8,10L64,35.4L49.2,10H25.6L64,76l38.4-66H78.8z" data-v-c0161dce=""></path>
        </svg>
      </a>
      <div class="nav flex-md-column nav-pills flex-grow-1" role="tablist" aria-orientation="vertical">
        <a class="mb-xl-3 mb-md-2 nav-link active  d-none d-sm-block flex-grow-1" data-toggle="pill" href="#"
           role="tab">
          <i class="zmdi zmdi-comment-alt"></i> <!-- Layers -->
        </a>

        <a class="mt-xl-3 mt-md-2 nav-link light-dark-toggle" href="#">
          <i class="zmdi zmdi-brightness-2"></i> <!-- Light/Dark Mode -->
          <input class="light-dark-btn" type="checkbox">
        </a>
        <a class="mt-xl-3 mt-md-2 nav-link d-none d-sm-block" href="#" role="tab">
          <i class="zmdi zmdi-settings"></i> <!-- Settings -->
        </a>
      </div>
    </div>
    <!-- Sidebar -->
    <div class="sidebar border-end py-xl-4 py-3 px-xl-4 px-3" :style="tabWidth">
      <div class="tab-content">
        <!-- Chat Records -->
        <div class="tab-pane fade active show" id="nav-tab-chat" role="tabpanel" v-if="showTab === 'nav-tab-chat'">
          <div class="d-flex justify-content-between align-items-center mb-4">
            <h3 class="mb-0 text-primary">TalkWithLLM</h3>
            <div>
              <button class="btn btn-dark" type="button" @click="handleAdd">New Chat</button>
            </div>
          </div>
          <ul class="chat-list">
            <li class="header d-flex justify-content-between ps-3 pe-3 mb-1">
              <span>RECENT CHATS</span>
            </li>
            <li v-for="(item, index) in conversationList" :class="[item.active ? 'active' : '']"
                @click="handleSwitch(item.uuid)">
              <div class="hover_action">
                <button type="button" class="btn btn-link text-info"><i class="zmdi zmdi-eye"></i></button>
                <button type="button" class="btn btn-link text-danger" @click="handleDele(item.uuid)"><i
                    class="zmdi zmdi-delete"></i></button>
              </div>
              <a href="#" class="card">
                <div class="card-body">
                  <div class="media">
                    <div class="avatar me-3">
                      <span class="status rounded-circle"></span>
                      <img class="avatar rounded-circle"
                           :style="[item.active ? 'filter:grayscale(0)' : 'filter:grayscale(1)']"
                           src="../assets/shark.jpg" alt="avatar"></div>
                    <div class="media-body overflow-hidden">
                      <div class="d-flex align-items-center mb-1">
                        <h6 class="text-truncate mb-0 me-auto">{{ item.title }}</h6>
                        <p class="small text-muted text-nowrap ms-4 mb-0">{{ item.createDate }}</p></div>
                      <div class="text-truncate">{{ item.lastChatContent }}</div>
                    </div>
                  </div>
                </div>
              </a>
            </li>
          </ul>
        </div>
        <!-- end Chat Records -->
        <!-- PDF Preview -->
        <div class="tab-pane fade active show" id="nav-tab-doc" role="tabpanel" v-if="showTab === 'nav-tab-doc'">
          <div class="d-flex justify-content-between align-items-center mb-4">
            <h3 class="mb-0 text-primary">TalkWithLLM-PDF</h3>
            <div>
              <button class="btn btn-dark" type="button" @click="handleBackChat">Back Chat</button>
            </div>
          </div>
          <ul class="chat-list">
            <li class="header d-flex justify-content-between ps-3 pe-3 mb-1">
              <span>PREVIEW</span>
            </li>
            <li v-if="isPdf">
              <vue-pdf-app style="height: 100vh;" :config="config" :pdf="pdfFile"></vue-pdf-app>
            </li>
            <li v-if="!isPdf">
              <v-md-preview :text="markdown"></v-md-preview>
            </li>
          </ul>
        </div>
        <!-- end PDF Preview -->
      </div>
    </div>

    <div class="main px-xl-5 px-lg-4 px-3">
      <div class="chat-body">
        <!-- Chat Box Header -->
        <div class="chat-header border-bottom py-xl-4 py-md-3 py-2">
          <div class="container-xxl">
            <div class="row align-items-center">
              <div class="col-6 col-xl-4">
                <div class="media">
                  <div class="me-3 show-user-detail">
                    <span class="status rounded-circle"></span>
                    <img class="avatar rounded-circle" src="../assets/shark.jpg" alt="avatar"></div>
                  <div class="media-body overflow-hidden">
                    <div class="d-flex align-items-center mb-1">
                      <h6 class="text-truncate mb-0 me-auto">Assistant</h6></div>
                    <div class="text-truncate">Powered By Baichuan2</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- end Chat Box Header -->

        <div class="chat-content" id="scrollRef" ref="scrollRef">
          <div class="container-xxl">
            <ul class="list-unstyled py-4" v-for="(item, index) of messageList">
              <!-- Right Message -->
              <li class="d-flex message right">
                <div class="message-body">
                  <span class="date-time text-muted"></span>
                  <div class="message-row d-flex align-items-center justify-content-end">
                    <div class="message-content border p-3">
                      {{ item.send.messages[0].content }}
                      <div class="attachment" v-show="item.send.messages[0].fileName" @click="handleBackDoc">
                        <div class="media mt-2">
                          <div class="avatar me-2">
                            <div class="avatar rounded no-image orange">
                              <i class="zmdi zmdi-collection-pdf"></i>
                            </div>
                          </div>
                          <div class="media-body overflow-hidden">
                            <h6 class="text-truncate mb-0">{{ item.send.messages[0].fileName }}</h6>
                            <span class="file-size">{{ item.send.messages[0].fileSize }}</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </li>
              <!-- end Right Message -->
              <!-- Left Message -->
              <li class="d-flex message" v-if="item.receive">
                <div class="mr-lg-3 me-2">
                  <img class="avatar sm rounded-circle" src="../assets/shark.jpg" alt="avatar"></div>
                <div class="message-body">
                  <div class="message-row d-flex align-items-center">
                    <div class="message-content p-3">
                      <v-md-preview
                          :text="item.receive.message?item.receive.message[0].content:ttt"></v-md-preview>
                    </div>
                    &nbsp&nbsp
                    <button type="submit" class="btn btn-primary rounded-circle" v-if="!recording"
                            @click="read_aloud(item)">
                      <i v-if="!item.reading" class="zmdi zmdi-play zmdi-hc-lg"></i>
                      <i v-if="item.reading" class="zmdi  zmdi-rotate-right zmdi-hc-spin"></i>
                    </button>
                  </div>
                </div>
              </li>
              <!-- end Left Message -->
              <!-- Loading Message -->
              <li class="d-flex message" v-if="item.loading">
                <div class="mr-lg-3 me-2">
                  <img class="avatar sm rounded-circle" src="../assets/shark.jpg" alt="avatar"></div>
                <div class="message-body">
                  <div class="message-row d-flex align-items-center">
                    <div class="message-content p-3">
                      <div class="wave">
                        <span class="dot"></span>
                        <span class="dot"></span>
                        <span class="dot"></span>
                      </div>
                    </div>
                  </div>
                </div>
              </li>
              <!-- end Loading Message -->
            </ul>
          </div>
        </div>
        <!-- Message Input Box -->
        <div class="chat-footer border-top py-xl-4 py-lg-2 py-2">
          <div class="container-xxl">
            <div class="row">
              <div class="col-12">
                <form @submit.prevent="handleSubmit">
                  <div class="input-group align-items-center">
                    <input type="text" v-model="prompt" class="form-control border-0 pl-0"
                           placeholder="Type your message...">
                    <div class="attachment" v-show="fileUploadCard" @click="handleBackDoc">
                      <div class="media mt-2">
                        <div class="avatar me-2">
                          <div class="avatar rounded no-image orange">
                            <i class="zmdi zmdi-collection-pdf"></i>
                          </div>
                        </div>
                        <div class="media-body overflow-hidden">
                          <h6 class="text-truncate mb-0">{{ fileName }}</h6>
                          <span class="file-size">{{ fileSize }}</span>
                        </div>
                      </div>
                    </div>
                    <div class="input-group-append">
                      <span class="input-group-text border-0">
                        <input type="file" accept="application/pdf, .md" id="fileInput" ref="file"
                               @change="handleUpload"
                               style="display:none">
                        <button class="btn btn-sm btn-link text-muted" data-toggle="tooltip"
                                @click="($refs.file as HTMLInputElement).click()" title="" type="button"
                                data-original-title="Attachment">
                          <i class="zmdi zmdi-attachment font-22"></i>
                        </button>
                      </span>
                    </div>
                    <div class="input-group-append">
                      <span class="input-group-text border-0 pr-0">
                        <button type="submit" class="btn btn-primary" :disabled="buttonDisabled" @click="handleSubmit">
                          <i class="zmdi zmdi-mail-send"></i>
                        </button>
                        &nbsp&nbsp&nbsp
                        <button type="submit" class="btn btn-primary" v-if="!recording" @click="startRecording">
                          <i class="zmdi zmdi-mic zmdi-hc-lg"></i>
                        </button>
                         <button type="submit" class="btn btn-primary" v-if="recording" @click="stopRecording">
                          <i class="zmdi zmdi-mic-off zmdi-hc-lg"></i>
                        </button>
                        &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
                        <input type="checkbox" name="autoRead" class="c_checkbox" v-model="autoRead">自动播放回复
                      </span>
                    </div>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
        <!-- end Message Input Box -->
      </div>
    </div>
    <!-- Empty Page -->
    <div class="main px-xl-5 px-lg-4 px-3" style="display:none">
      <div class="chat-body">
        <div class="chat d-flex justify-content-center align-items-center h-100 text-center py-xl-4 py-md-3 py-2">
          <div class="container-xxl">
            <div class="avatar lg avatar-bg me-auto ms-auto mb-5">
              <img class="avatar lg rounded-circle border" src="../assets/user.png" alt="">
              <span class="a-bg-1"></span>
              <span class="a-bg-2"></span>
            </div>
            <h5 class="font-weight-bold">Hey, Robert!</h5>
            <p>Please select a chat to start messaging.</p>
          </div>
        </div>
      </div>
    </div>
    <!-- end Empty Page -->
  </div>
</template>
